<style type="text/css">
body        { position: static; 
              font-family: serif;
              padding: 0 15px 50px 15px;
              margin: 0 0 0 0;
            }

h1          { width: 100%;
              border: 1px #000000 solid;
              background-color: #ffcccc;
              text-indent: 1em;
              padding: 3px 0 3px 0; 
              margin: 15px 0 0 0;
              clear: both;
            }

h2          { width: 100%;
              border: 1px #000000 solid;
              background-color: #cccccc;
              text-indent: 1em;
              padding: 3px 0 3px 0; 
              margin: 0 0 0 0;
              clear: both;
            }

h3          { width: 10em;
              background-color: #eeeeff;
              font-size: 100%;
              font-weight: 800;
              text-align: center;
              vertical-align: middle;
              margin: 0 0 0 0;
              clear: left;
              float: left;
            }

p           { text-align: justify;
              margin: 0 0 0 0;
              text-indent: 1em;
              display: block;
              clear: none;
            }

table       { position: relative;
              background-color: #eeeeff;
              border: 5px #000066 double;
              margin: 15px 0 15px 15px;
              float: right;
            }

td.th0      { text-align: center;
              border: 1px #000066 solid;
              background-color: #6666ff;
              color: #ffff00;
            }

td.th1      { text-align: center;
              border: 1px #000066 solid;
              background-color: #6666ff;
              color: #ffff00;
            }

td.td0      { text-align: right;
              font-family: Courier New, courier, monospace;
              font-size: 80%;
              font-weight: 800;
              color: #000099;
              width: 13em;
            }

td.td1      { text-align: left;
              text-indent: 1em;
              font-family: Courier New, courier, monospace;
              font-size: 80%;
              border: 1px #ccccff dotted;
              background-color: #ffffff;
              width: 19em;
            }

pre         { margin: 0 10px 0 10px; }

code        { color: #990000; }

li:first-line { font-weight: 800; }

hr          { position: static;
              background-color: #eeeeee;
              color: #eeeeee;
              width: 100%; height: 16px;
              border: 1px #000000 solid;
              clear: both;
            }


#validhtml  { float: left;
              clear: left;
              text-align: left;
              padding: 30px 0 0 0;
            }

#validcss   { float: left;
              clear: none;
              text-align: left;
              padding: 30px 0 0 30px;
            }

#copyright  { float: right;
              clear: right;
              text-align: right;
              padding: 30px 0 0 0;
            }


#movable_obj1_id { position:absolute; left:90px;  top:80px  }
#movable_obj2_id { position:absolute; left:140px; top:145px }
#movable_obj3_id { position:absolute; left:20px;  top:180px  }


.js_pre     { position: static;
              background-color: #eeeeee;
              font-family: Courier New;
              font-size: 12px;
              width: 100%; height: 400px;
              border: 1px #000000 solid;
              padding: 0 0 0 0;
              overflow: auto;
              clear: both;
            }

.infobox    { width: 200px; 
              border: 1px #333333 solid; 
              cursor: default;
              text-align: left;
              cursor: pointer;
              background-color: #77ff77;  
            }

.infobox div { background-color:#000088;
               text-indent: 1em;
               color:#ffff00; 
               width:100%;
             }
             
.email  { width: 100%;
          background-color: #ddeeff;
          border: 0;
          overflow: auto;
          padding: 0 0 0 0;
          color: #666666;
        }
        
.email div { margin:20px }        
</style>


<body onload="init();">

<!--- PHP is used to include this code block twice to ensure that it is identical to what is in the pre tag -->
<script type="text/javascript" defer>
//<!--

var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;

var dragobj = null;

function falsefunc() { return false; } // used to block cascading events

function init()
{
  document.onmousemove = update; // update(event) implied on NS, update(null) implied on IE
  update();
}

function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
  if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)

  if (e)
  { 
    if (e.pageX || e.pageY)
    { // this doesn't work on IE6!! (works on FF,Moz,Opera7)
      mousex = e.pageX;
      mousey = e.pageY;
      algor = '[e.pageX]';
      if (e.clientX || e.clientY) algor += ' [e.clientX] '
    }
    else if (e.clientX || e.clientY)
    { // works on IE6,FF,Moz,Opera7
      mousex = e.clientX + document.body.scrollLeft;
      mousey = e.clientY + document.body.scrollTop;
      algor = '[e.clientX]';
      if (e.pageX || e.pageY) algor += ' [e.pageX] '
    }  
  }
}

function update(e)
{
  getMouseXY(e); // NS is passing (event), while IE is passing (null)

  document.getElementById('span_browser').innerHTML = navigator.appName;
  document.getElementById('span_winevent').innerHTML = window.event ? window.event.type : '(na)';
  document.getElementById('span_autevent').innerHTML = e ? e.type : '(na)';
  document.getElementById('span_mousex').innerHTML = mousex;
  document.getElementById('span_mousey').innerHTML = mousey;
  document.getElementById('span_grabx').innerHTML = grabx;
  document.getElementById('span_graby').innerHTML = graby;
  document.getElementById('span_orix').innerHTML = orix;
  document.getElementById('span_oriy').innerHTML = oriy;
  document.getElementById('span_elex').innerHTML = elex;
  document.getElementById('span_eley').innerHTML = eley;
  document.getElementById('span_algor').innerHTML = algor;
  document.getElementById('span_dragobj').innerHTML = dragobj ? (dragobj.id ? dragobj.id : 'unnamed object') : '(null)';
}

function grab(context)
{
  document.onmousedown = falsefunc; // in NS this prevents cascading of events, thus disabling text selection
  dragobj = context;
  dragobj.style.zIndex = 10; // move it to the top
  document.onmousemove = drag;
  document.onmouseup = drop;
  grabx = mousex;
  graby = mousey;
  elex = orix = dragobj.offsetLeft;
  eley = oriy = dragobj.offsetTop;
  update();
}

function drag(e) // parameter passing is important for NS family 
{
  if (dragobj)
  {
    elex = orix + (mousex-grabx);
    eley = oriy + (mousey-graby);
    dragobj.style.position = "absolute";
    dragobj.style.left = (elex).toString(10) + 'px';
    dragobj.style.top  = (eley).toString(10) + 'px';
  }
  update(e);
  return false; // in IE this prevents cascading of events, thus text selection is disabled
}

function drop()
{
  if (dragobj)
  {
    dragobj.style.zIndex = 0;
    dragobj = null;
  }
  update();
  document.onmousemove = update;
  document.onmouseup = null;
  document.onmousedown = null;   // re-enables text selection on NS
}

//-->
</script>



<h1>Javascript example - drag and drop</h1>

<table>
<tr><td class="th0">parameter</td><td class="th1"> value </td></tr>
<tr><td class="td0">navigator.appName =</td><td class="td1"><span id="span_browser">&nbsp;</span></td></tr>
<tr><td class="td0">window.event =</td><td class="td1"><span id="span_winevent">&nbsp;</span></td></tr>
<tr><td class="td0">auto event =</td><td class="td1"><span id="span_autevent">&nbsp;</span></td></tr>
<tr><td class="td0">algorithm =</td><td class="td1"><span id="span_algor">&nbsp;</span></td></tr>
<tr><td class="td0">dragobj =</td><td class="td1"><span id="span_dragobj">&nbsp;</span></td></tr>
<tr><td class="td0">mousex,y =</td><td class="td1"><span id="span_mousex">&nbsp;</span>, <span id="span_mousey">&nbsp;</span></td></tr>
<tr><td class="td0">grabx,y =</td><td class="td1"><span id="span_grabx">&nbsp;</span>, <span id="span_graby">&nbsp;</span></td></tr>
<tr><td class="td0">orix,y =</td><td class="td1"><span id="span_orix">&nbsp;</span>, <span id="span_oriy">&nbsp;</span></td></tr>
<tr><td class="td0">elex,y =</td><td class="td1"><span id="span_elex">&nbsp;</span>, <span id="span_eley">&nbsp;</span></td></tr>
</table>

<br>

<div id="movable_obj1_id" class="infobox" onmousedown="grab(this)">
  <div> movable obj1 </div>
  This is a movable object. Click it and drag it somewhere else. 
  The values in the table will change to show you what's happening.
</div>

<div id="movable_obj2_id" class="infobox" onmousedown="grab(this)">
  <div> movable obj2 </div>
  This is a movable object. Click it and drag it somewhere else. 
  The values in the table will change to show you what's happening.
</div>

<div id="movable_obj3_id" class="infobox" onmousedown="grab(this)">
  <div> movable obj3 </div>
  This is a movable object. Click it and drag it somewhere else. 
  The values in the table will change to show you what's happening.
</div>

</body>

